<template>
  <div class="banner">
    <el-carousel trigger="click" height="720px">
      <el-carousel-item v-for="banner in banner_list" :key="banner.id">
         <a :href="banner.link"><img width="100%" :src="banner.image" alt=""></a>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
  export default{
    name: "Banner",
    data(){
      return{
        banner_list:[]
      };
    },
    created: function(){
      this.$axios.get(this.$settings.Host+'/banner/').then(response=>{
        console.log(response.data);
        this.banner_list = response.data;
      }).catch(error=>{
        console.log(error.response)
      })
    },
  }
</script>

<style>
  .el-carousel__arrow{
    width: 100px!important;
    height: 100px!important;
  }
  .el-icon-arrow-left{
    font-size: 35px;
    margin-left: 50px;
  }
  .el-icon-arrow-right{
    font-size: 35px;
    margin-right: 50px;
  }
  .el-carousel__arrow--left{
    left: -50px;
  }
  .el-carousel__arrow--right{
    right: -50px;
  }
</style>
